<template>
  <div>
    <a-form :form="form" >
      <a-row >
        <a-col :md="8" :sm="24">
          <a-form-item label="行号" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['no',{ rules: [{ required: true}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="扩展行号" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['name',{ rules: [{ required: false}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['mnemonicCode',{ rules: [{ required: false}] }]" readOnly></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row >
        <a-col :md="8" :sm="24">
          <a-form-item label="货主" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input
              @dblclick="clickStorer"
              v-decorator="['storer',{ rules: [{ required: true}] }]">
              <a-tooltip slot="suffix" title="双击查询货主">
                <a-icon type="search" style="color: rgba(0,0,0,.45)" />
              </a-tooltip>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="收货数量" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['name',{ rules: [{ required: false}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="冻结码" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['mnemonicCode',{ rules: [{ required: false}] }]" readOnly></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row >
        <a-col :md="8" :sm="24">
          <a-form-item label="商品" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input
              @dblclick="clickItem"
              v-decorator="['item',{ rules: [{ required: true}] }]">
              <a-tooltip slot="suffix" title="双击查询商品">
                <a-icon type="search" style="color: rgba(0,0,0,.45)" />
              </a-tooltip>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="LPN" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['name',{ rules: [{ required: false}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="理由码" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['mnemonicCode',{ rules: [{ required: false}] }]" readOnly></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row >
        <a-col :md="8" :sm="24">
          <a-form-item label="商品描述" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['no',{ rules: [{ required: true}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="位置" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input
              @dblclick="clickLocation"
              v-decorator="['location',{ rules: [{ required: true}] }]">
              <a-tooltip slot="suffix" title="双击查询位置">
                <a-icon type="search" style="color: rgba(0,0,0,.45)" />
              </a-tooltip>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item label="必须质量控制" :label-col="{ span: 14 }" :wrapper-col="{ span: 10 }">
            <a-checkbox ></a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item label="是否采集批属性" :label-col="{ span: 14 }" :wrapper-col="{ span: 10 }">
            <a-checkbox ></a-checkbox>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row >
        <a-col :md="8" :sm="24">
          <a-form-item label="包装" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input
              @dblclick="clickPack"
              v-decorator="['pack',{ rules: [{ required: true}] }]">
              <a-tooltip slot="suffix" title="双击查询包装">
                <a-icon type="search" style="color: rgba(0,0,0,.45)" />
              </a-tooltip>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="采购订单号" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['name',{ rules: [{ required: false}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item label="自动质量调整" :label-col="{ span: 14 }" :wrapper-col="{ span: 10 }">
            <a-checkbox ></a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item label="是否采集重量数据" :label-col="{ span: 14 }" :wrapper-col="{ span: 10 }">
            <a-checkbox ></a-checkbox>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row >
        <a-col :md="4" :sm="24">
          <a-form-item label="预计数量" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
            <a-input v-decorator="['no',{ rules: [{ required: false}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item label="单位" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-select v-decorator="['unit',{ rules: [{ required: false}] }]">
              <a-select-option v-for="d in unitData" :key="d.ordinal">{{ d.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="采购单行号" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['name',{ rules: [{ required: false}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="温度" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['mnemonicCode',{ rules: [{ required: false}] }]" readOnly></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row >
        <a-col :md="8" :sm="24">
          <a-form-item label="毛重" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['no',{ rules: [{ required: true}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="净重" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['name',{ rules: [{ required: true}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="皮重" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['mnemonicCode',{ rules: [{ required: true}] }]" ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <storer ref="storer" @setSelectedValue="setSelectedValue"></storer>
      <location ref="location" @setSelectedValue="setSelectedValue"></location>
      <pack ref="pack" @setSelectedValue="setSelectedValue"></pack>
      <item ref="item" @setSelectedValue="setSelectedValue"></item>
    </a-form>
  </div>
</template>

<script>
import Location from '@/views/editPreview/modal/Location'
import Item from '@/views/editPreview/modal/Item'
import Pack from '@/views/editPreview/modal/Pack'
import Storer from '@/views/editPreview/modal/Storer'
export default {
  name: 'ReceiveDetail',
  components: { Item, Location, Pack, Storer },
  data () {
    return {
      form: this.$form.createForm(this),
      id: 0,
      unitData: []
    }
  },
  // beforeCreate () {
  //   this.form = this.$form.createForm(this)
  // },
  methods: {
    setFormValue (record) {
      this.$message.info(JSON.stringify(record))
    },
    clickStorer () {
      this.$refs.storer.open()
    },
    clickLocation () {
      this.$refs.location.open()
    },
    clickPack () {
      this.$refs.pack.open()
    },
    clickItem () {
      this.$refs.item.open()
    },
    setSelectedValue (returnData) {
      this.form.setFieldsValue(returnData)
    }
  }
}
</script>
